<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<!--

1
	在ie6下子级的宽度会撑开父级设置好的宽度。
	注意 ：盒子模型的计算一定要精确，否则ie浏览器可能会显示不同。
2   
    在ie6中元素浮动如果宽度需要内容撑开需要给里面的元素都添加浮动才行。
3
     在ie6和ie7下元素要通过浮动排在同一排，就需要给这些元素都加浮动。
4    
     注意标签的嵌套规则

5   
     在ie6下元素的高度如果小于 19px会被当成19px来处理解决方法 overflow:hidden;    
6
    在ie6下不支持1px 的dotted边框样式（border:1px dotted red）
    解决办法：切背景平铺。
7
     在IE下大部分兼容性都是因为haslayout(ie6,ie7,ie8有)属性的触发问题，尽量触发haslayout属性，可以减少很多ie下的兼容问题。
   
   在ie下父级有边框，子元素的margin会失效。
   解决办法：触发父级的haslayout属性（zoom:1）  
   
8 
   ie6下双边距的bug
   在ie6下，块元素（div,p）有浮动有横向的margin的值得时候横向的margin的值会扩大两倍.（margin-left 一行中左侧的第一个元素有双边距，margin-right一行中右侧的第一个元素有双边距）
   解决办法：display:inline 转为内联元素。

9   在ie6和ie7下 li本身没有浮动 ，li里面的内容有浮动，li下会产生一个间隙。
  解决办法：
      一给li加浮动
      二给li加 vertical-align:top
      三在ie6下最小高度的bug和li的间隙问题共存的时候，解决办法只能给li加浮动，overtical-align不好使。

10 
  在ie6中当一行子级元素宽度之和和父级的宽度相差超过3px,或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效。 
	只能去避免没有有效解决办法。
11
   在ie6下文字溢出bug
   子元素的宽度和父元素的父级的宽度如果相差小于3px的时候，两个浮动元素中间有注释或者内联元素(span),就会出现文字溢出，内联元素越多溢出越多

   解决办法：用div把注释或者内联元素包起来。
 
 12
    在ie6下当浮动元素和绝对定位元素是兄弟关系的时候绝对定位会失效。
    解决办法：
      不让浮动元素和绝对定位元素是兄弟关系， 用div或者其他标签把a标签包起来。 
 13
    在ie6 和ie7 下子级元素有相对定位，父级overflow包不住子级元素
    解决办法：给父级也加上相对定位。

 14 
    在ie6下如果绝对定位的父级宽高是奇数的时候子级元素的right和bottom值会有1px的偏差。  
    只能避免无法解决。
15  
   ie6和ie7和ie8对透明度的写法不支持  opacity:0.5;(0-1)
   支持的写法是 filter:alpha(opacity=50);(0-100);
   所以要都写上.
 16
    在ie6和ie7下包含在div中的输入型(input)的表单标签控件上下会有1px的间隙. 
    处理办法：给input加浮动float:left;

 17 
   ie6 .png图片不兼容
   处理方式：js插件处理。

 18
    ie6,7,8中的注释用特定
条件注释语句可以实现显示。
<!--[if ie]>
我是注释我可以被ie解释到
<![endif]-->

<!--[if ie6]>
引入不同的css样式和js等
<![endif]-->

<!--[if ie7]>
我是ie7
<![endif]-->

<!--[if ie8]>
我是ie8
<![endif]-->
<!--
19  css  hack
	div{
		background:red;
		background:yellow\9;
		+background:black;
		_background:pink;


	}

      \9    ie10之前的ie浏览器解析的代码
      +或者*表示ie7包括ie7之前的ie浏览器解析的代码
      _表示ie6包括ie6之前的浏览器解析
	-->
	<style type="text/css">
		#box{
			width: 400px;
		}
		.left{
			width: 200px;
			background: red;
			height: 300px;
			float: left;
		}
		.right{
			width: 200px;
		     float:right;
		}
		.div{
			width: 180px;
			height: 180px;
			padding: 15px;
			background: blue;

		}
	</style>
</head>
<body>
	<div id="box">
		<div class="left"></div>
		<div class="right">
			<div class="div"></div>
		</div>
	</div>
</body>
</html>